<template>
  <div class="profile-container">
    <!-- 头部用户信息 -->
    <div class="user-header">
      <div class="logo">
        <img src="../assets/头像.jpg" alt="avatar" class="avatar">
      </div>
      <div class="user-info">
        <h2>{{ maskPhone(user?.userId) }}</h2>
        <div class="account-manage" @click="manageAccount">
          账户管理
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
    </div>

    <!-- 资产信息 -->
    <div class="asset-section">
      <div class="asset-item" @click="goToAsset">
        <i class="fa fa-credit-card"></i>
        <span>我的资产</span>
      </div>
      <div class="asset-item" @click="goToRedPacket">
        <i class="fa fa-gift"></i>
        <span>红包</span>
        <span class="sub-text">查看我的红包</span>
      </div>
      <div class="asset-item" @click="goToCoupons">
        <i class="fa fa-tags"></i>
        <span>券包</span>
        <span class="sub-text">查看我的券</span>
      </div>
    </div>

    <!-- 功能列表 -->
    <div class="function-list">
      <div class="function-item" @click="goToAddress">
        <i class="fa fa-map-marker"></i>
        <span>我的地址</span>
        <i class="fa fa-angle-right arrow"></i>
      </div>
      <div class="function-item" @click="goToService">
        <i class="fa fa-headphones"></i>
        <span>我的客服</span>
        <i class="fa fa-angle-right arrow"></i>
      </div>
      <div class="function-item" @click="goToAbout">
        <i class="fa fa-info-circle"></i>
        <span>关于饿了么</span>
        <i class="fa fa-angle-right arrow"></i>
      </div>
      <div class="function-item" @click="goToPrivacy">
        <i class="fa fa-user-secret"></i>
        <span>用户隐私</span>
        <i class="fa fa-angle-right arrow"></i>
      </div>
      <div class="function-item" @click="goToRules">
        <i class="fa fa-file-text-o"></i>
        <span>规则中心</span>
        <i class="fa fa-angle-right arrow"></i>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-section">
      <el-button type="danger" class="logout-btn" @click="handleLogout">退出登录</el-button>
    </div>

    <!-- 版本信息 -->
    <div class="version-info">
      11.13.19-1
    </div>

    <!-- 底部导航 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Footer from './Footer.vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const user = ref(null)

onMounted(() => {
  const token = sessionStorage.getItem('token')
  if (!token) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  const userInfo = sessionStorage.getItem('user')
  if (userInfo) {
    user.value = JSON.parse(userInfo)
  } else {
    ElMessage.warning('用户信息已失效，请重新登录')
    router.push('/login')
  }
})

// 手机号码脱敏
const maskPhone = (phone) => {
  if (!phone) return ''
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 页面跳转方法
const manageAccount = () => {
  ElMessage.info('账户管理功能开发中')
}

const goToAsset = () => {
  ElMessage.info('我的资产功能开发中')
}

const goToRedPacket = () => {
  ElMessage.info('红包功能开发中')
}

const goToCoupons = () => {
  ElMessage.info('券包功能开发中')
}

const goToAddress = () => {
  router.push('/userAddress')
}

const goToService = () => {
  ElMessage.info('客服功能开发中')
}

const goToAbout = () => {
  ElMessage.info('关于页面开发中')
}

const goToPrivacy = () => {
  ElMessage.info('隐私政策页面开发中')
}

const goToRules = () => {
  ElMessage.info('规则中心页面开发中')
}

// 添加退出登录方法
const handleLogout = () => {
  // 清除登录信息
  sessionStorage.removeItem('token')
  sessionStorage.removeItem('user')
  
  // 提示用户
  ElMessage.success('退出登录成功')
  
  // 跳转到登录页
  router.push('/login')
}
</script>

<style scoped>
.profile-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 14vw;
}

.user-header {
  background: #0097ff;
  padding: 20px;
  display: flex;
  align-items: center;
  color: #fff;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-info {
  flex: 1;
}

.user-info h2 {
  font-size: 20px;
  margin: 0 0 8px 0;
}

.account-manage {
  font-size: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.account-manage i {
  margin-left: 5px;
}

.asset-section {
  background: #fff;
  margin: 10px 0;
  padding: 15px;
  display: flex;
  justify-content: space-around;
}

.asset-item {
  text-align: center;
  cursor: pointer;
}

.asset-item i {
  font-size: 24px;
  color: #0097ff;
  margin-bottom: 5px;
}

.asset-item span {
  display: block;
  font-size: 14px;
  color: #333;
}

.sub-text {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.function-list {
  background: #fff;
  margin: 10px 0;
}

.function-item {
  padding: 15px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.function-item i {
  font-size: 18px;
  color: #666;
  margin-right: 10px;
}

.function-item span {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.arrow {
  margin-right: 0;
  color: #999;
}

.logout-section {
  margin: 20px 15px;
}

.logout-btn {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  font-size: 16px;
  background: #ff4949;
  border-color: #ff4949;
}

.logout-btn:hover {
  background: #ff6464;
  border-color: #ff6464;
}

.version-info {
  margin-top: 30px;
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 12px;
}
</style> 